<template>
  <div class="record_box">
    <navigate @answerBack="answerBack">{{
      currentTab == 1 ? "收取记录" : "投递记录"
    }}</navigate>
    <div class="tab_bar">
      <div
        class="item_tab tab_01"
        @click="chooseTab(1)"
        :class="{ active_tab: currentTab == 1 }"
      >
        <img
          src="@/assets/images/home/capture_icon.png"
          alt=""
          v-if="currentTab == 1"
        />
        <img src="@/assets/images/home/no_capture.png" alt="" v-else />
        <div>收取记录</div>
      </div>
      <div
        class="item_tab tab_02"
        @click="chooseTab(2)"
        :class="{ active_tab: currentTab == 2 }"
      >
        <img
          src="@/assets/images/home/deliver_icon.png"
          alt=""
          v-if="currentTab == 2"
        />
        <img src="@/assets/images/home/no_deliver_icon.png" alt="" v-else />
        <div>投递记录</div>
      </div>
    </div>

    <div class="list_box" @scroll="handleScroll">
      <div class="record_list" v-if="currentTab == 1">
        <div
          v-for="(item, index) in collectList"
          :key="index"
          class="item_record"
          @click="toDetailsPage(item.id, 1)"
        >
          <div class="record_head">
            <div class="user_info">
              <img :src="item.fruit.avatar" alt="" />
              <span>{{ item.fruit.user_name }}</span>
            </div>
            <div class="record_num">
              被收取过:{{ item.fruit.collect_num }}次
            </div>
          </div>
          <div class="record_time">
            收取于：{{ convertTimestampToDateTime(item.fruit.time) }}
          </div>
          <div class="record_cont">{{ item.fruit.content }}</div>
          <div class="like_box" @click.stop="submitCollectLike(item.fruit)">
            <img
              src="@/assets/images/function/like.png"
              alt=""
              v-if="item.fruit.is_like == 1"
            />
            <img src="@/assets/images/function/no_like.png" alt="" v-else />
            <div>点赞</div>
          </div>
        </div>
      </div>

      <div class="deliver_list" v-else>
        <div
          v-for="(item, index) in deliveryList"
          :key="index"
          class="item_deliver"
          @click="toDetailsPage(item.id, 2)"
        >
          <div class="deliver_desc">
            {{ item.content }}
          </div>
          <div class="operation_box">
            <div
              class="operation_record"
              v-if="item.icon_status == 2 || item.icon_status == 1"
            >
              <img src="@/assets/images/function/recording_icon.png" alt="" />
              <div>有录音</div>
            </div>
            <div
              class="operation_record operation_img"
              v-if="item.icon_status == 3 || item.icon_status == 1"
            >
              <img src="@/assets/images/function/picture_icon.png" alt="" />
              <div>有图片</div>
            </div>
          </div>
          <div class="deliver_info">
            <div>
              <div>投递于：{{ convertTimestampToDateTime(item.time) }}</div>
              <div class="collect_num">被收取：{{ item.collect_num }}次</div>
            </div>
            <div class="num_info">
              <div class="apple" v-if="item.real_name_status == 1">
                <img src="@/assets/images/function/apply_icon.png" alt="" />
                <div>申请</div>
              </div>
              <div>
                <img src="@/assets/images/function/like.png" alt="" />
                <div>{{ item.like_num }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="no_data_txt">-- 无更多记录了 --</div>
    </div>
  </div>
</template>

<script>
import { convertTimestampToDateTime } from "@/utils/time";
import {
  queryCollectList,
  toCollectLike,
  queryDeliveryList,
} from "@/api/funcation/wisdomTree";
export default {
  data() {
    return {
      currentTab: this.$route.query.currentTab || 1,
      pageNum: 1,
      pageSize: 10,
      collectList: [],
      deliveryList: [],
      total: 0,
    };
  },
  created() {
    this.getTab();
  },
  methods: {
    convertTimestampToDateTime,
    //投递列表
    async getDeliveryList() {
      let par = {
        page: this.pageNum,
        pageSize: this.pageSize,
      };
      let res = await queryDeliveryList(par);
      if (res.code == 200) {
        this.deliveryList.push(...res.data.data);
        this.total = res.data.total;
      }
    },
    async getCollectList() {
      let par = {
        page: this.pageNum,
        pageSize: this.pageSize,
      };
      let { data } = await queryCollectList(par);
      this.collectList.push(...data.data);
      this.total = data.total;
    },
    //点赞
    async submitCollectLike(val) {
      let par = {
        id: val.id,
        status: val.is_like == 1 ? 0 : 1,
      };
      let res = await toCollectLike(par);
      if (res.code == 200) {
        this.collectList = [];
        this.getCollectList();
      }
    },
    handleScroll(e) {
      const container = e.target;
      const containerHeight = container.clientHeight;
      const contentHeight = container.scrollHeight;
      const scrollTop = container.scrollTop;
      if (scrollTop + containerHeight >= contentHeight) {
        if (
          this.total >
          (this.currentTab == 1
            ? this.collectList.length
            : this.deliveryList.length)
        ) {
          this.pageNum += 1;
          this.getTab();
        }
      }
    },
    chooseTab(v) {
      this.currentTab = v;
      this.$router.push({
        path: this.$route.path,
        query: {
          currentTab: this.currentTab,
        },
      });
      this.collectList = [];
      this.deliveryList = [];
      this.pageNum = 1;
      this.getTab();
    },
    getTab() {
      this.currentTab == 1 ? this.getCollectList() : this.getDeliveryList();
    },
    toDetailsPage(id, v) {
      this.$router.push(`/recordDetails?type=${v}&id=${id}`);
    },
    answerBack() {
      this.$router.push({ path: "/wisdomTree" });
    },
  },
};
</script>

<style lang="less" scoped>
.record_box {
  background-color: #f4f6fa;
}

//投递
.deliver_list {
  padding: 0 10px;
}

.item_deliver {
  // height: 124.67px;
  padding: 16px 11px;
  background: #ffffff;
  border-radius: 6.67px;
  margin-bottom: 6.67px;
}

.deliver_desc {
  font-size: 15.33px;
  line-height: 15.33px;
  color: #333333;
  line-height: 24px;
}

.operation_box {
  display: flex;
  align-items: center;
  margin: 16.33px 0 9.67px;
}

.operation_record {
  display: flex;
  align-items: center;
  margin: 13px 20px 0 0;
}

.operation_record:last-child {
  margin-right: 0;
}

.operation_record img {
  width: 16.67px;
  height: 15.33px;
  margin-right: 7px;
}

.operation_record div {
  font-size: 12px;
  line-height: 12px;
  color: #ff9500;
}

.operation_img div {
  color: #59ba21;
}

.deliver_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
  font-size: 12px;
  line-height: 12px;
}

.collect_num {
  margin-top: 9.67px;
}

.num_info {
  display: flex;
  align-items: center;
  text-align: center;
}

.num_info img {
  width: 18px;
  height: 18px;
}

.num_info div {
  margin-top: 8px;
  font-size: 12px;
  line-height: 10px;
  color: #333333;
}

.num_info .apple {
  margin-right: 30px;
}
.list_box {
  height: calc(100vh - 120px);
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
//记录
.record_list {
  margin: 0 10px;
}

.item_record {
  position: relative;
  padding: 16px 10px 0 16px;
  height: 124.67px;
  background: #ffffff;
  border-radius: 6.67px;
  margin-bottom: 6.67px;
}

.record_head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.like_box {
  text-align: center;
}

.like_box img {
  width: 18px;
  height: 18px;
}

.like_box div {
  color: #333333;
  line-height: 10.67px;
  font-size: 10.67px;
}

.like_box {
  position: absolute;
  right: 16.67px;
  bottom: 16.67px;
}

.record_time {
  margin: 10.33px 0 8.67px;
  color: #555555;
  font-size: 12px;
  line-height: 12px;
}

.record_cont {
  width: 85%;
  font-size: 12px;
  color: #555555;
  line-height: 18.67px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.user_info {
  display: flex;
  align-items: center;
}

.user_info img {
  width: 30px;
  height: 30px;
  margin-right: 9px;
  border-radius: 50%;
}

.user_info span {
  font-size: 15.33px;
  line-height: 15.33px;
  font-weight: bold;
  color: #333333;
}

.record_num {
  font-size: 12.67px;
  color: #aaaaaa;
}

//tabbar
.tab_bar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}

.item_tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 163.33px;
  height: 33.33px;
  background: #ffffff;
  color: #333333;
}

.tab_01 {
  border-radius: 6.67px 0 0 6.67px;
}

.tab_02 {
  border-radius: 0px 6.67px 6.67px 0px;
}

.item_tab img {
  width: 16.67px;
  height: 16.67px;
  margin-right: 13px;
}

.item_tab div {
  line-height: 14.67px;
  font-size: 14.67px;
  font-weight: bold;
}

.active_tab {
  color: #fff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.no_data_txt {
  font-size: 14px;
  margin: 32px auto;
  text-align: center;
}
</style>
